<script lang="ts" setup>
import navigateTo from '@/utils/navigator'

const {id} = defineProps<{
    id: number
    icon: string
    title: string
    linearGradient: string
}>()

const {change} = $(useCategory())

async function onClick() {
    /**
     * 跳转分类页
     */
    navigateTo('/pages/category/index')
    await change({categoryParentId: id})
}
</script>

<template>
    <view center flex-col mt @click="onClick">
        <view w-70 h-70 rounded-full center p-1 :style="{ backgroundImage: linearGradient }">
            <image w-50 h-50 :src="`/static/images/icons/index/${icon}.png`"/>
        </view>
        <text text="22 #333333" m="t-0.5">
            {{ title }}
        </text>
    </view>
</template>
